<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <link rel="stylesheet" th:href="@{/css/frm_base.css}" />
    <script th:src="@{/js/jquery-3.5.1.js}"></script>
    <style>
        #form1,#form2{
            width: 50%;
            margin: 50px auto;
        }

        #form2{
            display: none;
        }
    </style>
</head>
<body>
<div class="main">
    <div style="padding: 20px" id="form1">
        <h2 class="title">账号信息</h2>
        <hr class="layui-bg-green">
        <form action="" class="layui-form login" lay-filter="userForm" id="userForm">
            <input type="hidden" name="id" th:value="${session.sysUser.id}">
            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="username" lay-verify="required" autocomplete="off" placeholder="请输入姓名"
                           class="layui-input" th:value="${session.sysUser.username}">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">电话</label>
                <div class="layui-input-block">
                    <input type="text" name="phone" lay-verify="required|phone" autocomplete="off" placeholder="请输入电话"
                           class="layui-input" th:value="${session.sysUser.phone}">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input type="radio" name="sex" value="男" title="男" th:checked="${session.sysUser.sex=='男'}">
                    <input type="radio" name="sex" value="女" title="女" th:checked="${session.sysUser.sex=='女'}">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-submit lay-filter="updateBtn" id="btn">提交</button>
                    <button type="button" class="layui-btn layui-btn-primary" id="setPwd">重置密码</button>
                </div>
            </div>
        </form>
    </div>
    <div style="padding: 20px" id="form2">
        <h2 class="title">密码重置</h2>
        <hr class="layui-bg-green">
        <form action="" class="layui-form login" lay-filter="pwdForm" id="pwdForm">
            <input type="hidden" name="id" th:value="${session.sysUser.id}">
            <div class="layui-form-item">
                <label class="layui-form-label">新密码</label>
                <div class="layui-input-block">
                    <input type="password" name="password" lay-verify="required" autocomplete="off" placeholder="请输入新密码"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">确认密码</label>
                <div class="layui-input-block">
                    <input type="password" name="password2" lay-verify="required" autocomplete="off" placeholder="请再次输入密码"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-submit lay-filter="pwdbtn" id="pwdbtn">提交</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script th:src="@{/layui/layui.js}"></script>
<script th:inline="none">
    layui.use(['element', 'layer', 'form'], function () {
        var form = layui.form,
            layer = layui.layer

        // dialog提交按钮
        form.on('submit(updateBtn)', function (data) {
            var formData = data.field;
            update(formData)
            return false;
        })
        form.on('submit(pwdbtn)', function (data) {
            var formData = data.field;
            resetPwd(formData)
            return false;
        })

        $('#setPwd').click(function () {
            $('#form1').css('display','none')
            $('#form2').css('display','block')
        })

        // 更新、新增
        function update(param) {
            var url = '/ssms/sys/update';
            $.post(url,param,function (res) {
                if (res.code == 200) {
                    layer.msg('更新成功', {icon: 6, time: 1000})
                } else {
                    layer.msg(res.msg, {icon: 5, time: 1000})
                }
            })
        }

        function resetPwd(data) {
            if(data.password != data.password2){
                layer.msg('密码不一致',{icon:7})
                return;
            }

            $.post('/ssms/sys/update',data,function (res) {
                if (res.code == 200){
                    layer.msg('更新成功',{icon:6})
                    $('#form2').css('display','none')
                    $('#pwdForm')[0].reset()
                    $('#form1').css('display','block')
                }
            })
        }


    });
</script>
</body>
</html>